<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-03 21:46:21
 * @LastEditTime: 2019-09-03 21:46:21
 * @LastEditors: your name
 -->
<template>
  <Row class="article-row" type="flex" :gutter="15">
    <Col :lg="{span:13,offset:3}" :xs="{span:24}" class="article-row-data-left">
      <h3>
        <div class="article-row-data-left-img"></div>
        <span>最新动态</span>
        <!-- <span class="total-counts" @click="showCount">
          <Tooltip placement="bottom" content="点击查看在线宝宝！">当前在线人数:{{count}}人</Tooltip>
        </span> -->
        <div class="count-box" v-if="countBox">
          <div v-for="item in ip">{{item.split('.')[0]+'.***.***.'+item.split('.')[3]}}(未知用户)</div>
        </div>
      </h3>
      <Swiper></Swiper>
      <h3 class="article-row-data-left-anli" style="margin-top:15px;">
        <div class="article-row-data-left-img2"></div>
        <span>优秀APP</span>
      </h3>
      <GreatApp></GreatApp>
      <h3 class="article-row-data-left-anli" style="margin-top:15px;">
        <div class="article-row-data-left-img2"></div>
        <span>安利平台</span>
      </h3>
      <Scroll :id="id"></Scroll>
    </Col>
    <Col :lg="5" class="article-row-data-right">
      <Hot></Hot>
      <Dongdan :id="id"></Dongdan>
    </Col>
  </Row>
</template>
<script>
import Swiper from "../anli/swiper/swiper";
import Scroll from "../anli/scroll/scroll";
import Hot from "../anli/hot/hot";
import Dongdan from "../anli/dongdan/dongdan";
import GreatApp from "../anli/greatApp/greatApp";
export default {
  name: "Index",
  data() {
    return {
      countBox: false
    };
  },
  props: ["count", "ip",'id'],
  mounted() {
    console.log(this.$router);
  },
  methods: {
   
  },
  components: {
    Swiper: Swiper,
    Scroll: Scroll,
    Hot: Hot,
    Dongdan: Dongdan,
    GreatApp
  }
};
</script>
<style lang="scss" scoped>
$hoverColor: rgb(221, 221, 221);
.article-row {
  width: 100%;
  height: inherit;
}
.article-col {
  // min-height: 800px;
  height: auto;
  background-color: white;
  // margin-top: 80px;
  height: 100%;
}
.article-row-data {
  height: 100%;
}
.article-row-data-left {
  position: relative;
  // min-height: 800px;
  height: 100%;
  // border-right: 1px solid $hoverColor;
  box-sizing: border-box;
  // background-color: white;
  h3 {
    position: relative;
    display: flex;
    text-align: left;
    padding: 5px;
    height: 31px;
    background-color: white;
    .count-box {
      position: absolute;
      display: flex;
      right: 0;
      top: 31px;
      width: 100%;
      height: 250px;
      background-color: white;
      z-index: 900;
      align-items: center;
      flex-direction: column;
      overflow: auto;
      box-shadow: 0px 0px 5px rgb(131, 131, 131);
      &::-webkit-scrollbar {
        width: 5px;
        background-color: white;
      }
      &::-webkit-scrollbar-thumb {
        background-color: rgb(216, 216, 216);
      }
    }
  }
  .article-row-data-left-img {
    width: 21px;
    height: 21px;
    background-image: url("../../../assets/SAOIcon/symbol/Msg_normal.png");
    background-size: cover;
  }
  .article-row-data-left-img2 {
    width: 21px;
    height: 21px;
    background-image: url("../../../assets/SAOIcon/icon/items_normal.png");
    background-size: cover;
    margin-right: 10px;
  }

  .total-counts {
    position: absolute;
    right: 5px;
    cursor: pointer;
  }
  .article-row-data-left-anli {
    box-sizing: border-box;
    border-bottom: 1px solid $hoverColor;
  }
}
.article-row-data-right {
  overflow: hidden;
  // margin-left: 15px;
  // background-color: white;
}
</style>

